<template>
  <div class="app-container banner">
    <div class="mb8 el-row" style="margin-left: -5px; margin-right: -5px">
      <el-button type="primary" plain size="mini" @click="handleAddBanner">
        新增
      </el-button>
    </div>
    <el-upload
      :action="uploadImgUrl"
      list-type="picture-card"
      :file-list="list"
      name="file"
      :headers="headers"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuc"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <input
          type="text"
          placeholder="请输入名称"
          class="banner-input"
          v-model="file.name"
          disabled="false"
        />
        <div class="banner-state">
          状态：
          <el-switch v-model="file.state" @change="handleChnage(file.id)">
          </el-switch>
        </div>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleEdit(file)"
          >
            <i class="el-icon-edit"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      @close="handleClose"
    >
      <div class="imgblock">
        <p>图片：</p>
        <imageUpload
          ref="imgload"
          :multiple="false"
          :isShowTip="false"
          :limit="1"
          @input="handleImageUpload"
        ></imageUpload>
      </div>
      <div class="nameblock">
        <p>名称：</p>
        <input
          type="text"
          placeholder="请输入名称"
          class="dialogInput"
          v-model="cacheImgUpload.name"
        />
      </div>
      <div class="stateblock">
        状态：
        <el-switch v-model="cacheImgUpload.state"> </el-switch>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  addBanner,
  deleteBnaner,
  editBnaner,
} from "@/api/system/banner";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      list: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      addDialogVisible: false,
      cacheImgUpload: {
        url: "",
        name: "",
        state: true,
      },
      title: "添加banner",
      isEdit: false,
      editId: 0,
    };
  },
  methods: {
    handleRemove(file) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const id = file.id;
        const index = this.list.findIndex((item) => {
          console.log(item);
          return item.id == id;
        });
        deleteBnaner(id).then((res) => {
          this.list.splice(index, 1);
          this.$message({
            type: "success",
            message: res.msg,
          });
        });
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadSuc(res) {
      this.list.unshift({ url: res.url });
      const data = {
        name: "",
        image: res.url,
        state: "Y",
      };
      addBanner(data)
        .then((res) => {
          this.$message({
            type: "success",
            message: "上传成功",
          });
          this.getList();
        })
        .finally(() => {
          this.loading.close();
        });
    },
    handleImageUpload(e) {
      this.cacheImgUpload.url = e;
    },
    handleAddBanner() {
      this.title = "添加banner";
      this.isEdit = false;
      this.addDialogVisible = true;
    },
    handleClose() {
      this.cacheImgUpload = {
        url: "",
        name: "",
        state: true,
      };
      this.$refs["imgload"].clearFile();
    },
    handleConfirmUpload() {
      if (!this.isEdit) {
        //新增
        if (this.cacheImgUpload.url == "") {
          this.$message({
            type: "error",
            message: "请上传图片",
          });
        }
        const data = { ...this.cacheImgUpload };
        data.state ? "Y" : "N";
        data.image = data.url;
        delete data.id;
        addBanner(data).then(() => {
          this.list.unshift(this.cacheImgUpload);
          this.cacheImgUpload = {
            url: "",
            name: "",
            state: true,
          };
          this.addDialogVisible = false;
          this.getList()
        });
      } else {
        //编辑
        if (this.cacheImgUpload.url == "") {
          this.$message({
            type: "error",
            message: "请上传图片",
          });
        }
        const data = { ...this.cacheImgUpload };
        data.state = data.state ? "Y" : "N";
        data.id = this.editId;
        data.image = data.url;
        editBnaner(data).then(() => {
          const index = this.list.findIndex((item) => {
            return item.id === this.editId;
          });
          this.list.splice(index, 1, this.cacheImgUpload);
          this.addDialogVisible = false;
          this.getList()
        });
      }
    },
    handleChnage(id) {
      const obj = this.list.find((item) => {
        return item.id == id;
      });
      const data = {
        image: obj.url,
        id: obj.id,
        state: obj.state ? "Y" : "N",
        name: obj.name,
      };
      editBnaner(data).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },
    handleEdit(file) {
      this.title = "编辑banner";
      this.cacheImgUpload = {
        url: file.image,
        name: file.name,
        state: file.state,
      };
      this.addDialogVisible = true;
      this.isEdit = true;
      this.editId = file.id;
      this.$nextTick(() => {
        this.$refs["imgload"].handleEdit(this.cacheImgUpload);
      });
    },
    // handleDownload(file) {
    //   console.log(file);
    // },
    getList() {
      getList().then((res) => {
        const list = res.rows;
        list.forEach((item) => {
          item.url = item.image;
          item.state = item.state == "Y" ? true : false;
        });
        this.list = list;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style scoped>
.banner-input {
  width: 148px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #efefef;
  outline: 0;
}
.banner-state {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  height: 148px;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
}
.dialogInput {
  width: 148px;
  height: 40px;
  border: 1px solid #efefef;
  outline: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.stateblock,
.nameblock {
  display: flex;
  align-items: center;
}
.imgblock {
  display: flex;
  align-items: flex-end;
}
</style>